<template>
  <div>
    <a-modal title="商品评论设置" :visible="currentVisible" width="600px" @ok="handleSubmit" @cancel="currentVisible = false">
      <a-form-model ref="rulesForm" :model="form" :rules="rules" 
      :labelCol="{ span: 5 }"
      :wrapperCol="{ span: 18 }"
      >
        <a-form-model-item label="选择品牌" prop="brandId">
          <a-select v-model="form.brandId" placeholder="请选择" show-search :filter-option="filterOption">
            <a-select-option v-for="item in brandList" :value="item.weid" :key="item.weid">{{ item.name }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="订单评价按钮" prop="isBtn">
          <a-radio-group v-model="form.isBtn">
            <a-radio value="1">显示</a-radio>
            <a-radio value="0">隐藏</a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item>
          <template v-slot:label>
            <span style="color:#f5222d;font-family: SimSun, sans-serif;">*</span> 自动评论
          </template>
          <div style="display: flex;">
            <span>订单确认收货 </span>
            <a-form-model-item prop="limitRa">
              <a-input-number placeholder="请输入" v-model="form.limitRa" :precision="0" :min="7" :max="90" allowClear />
            </a-form-model-item>
            <span> 天后买家未评论，系统将自动评论</span>
          </div>
          <div style="color: #999;margin-top:-10px;width: 100%;">注：默认30天，可填7～90天</div>
        </a-form-model-item>
        
        <a-form-model-item label="自动评论文案" prop="remark">
          <a-input v-model="form.remark" placeholder="请输入" :maxLength="20" allowClear />
          <div style="color: #999;margin-top:-10px;">注：默认5星好评，可填1～20字</div>
        </a-form-model-item>  
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import { brandList } from '../components/brandList.js'
export default {
  data() {
    return {
      brandList,
      form: {
        brandId: '',
        isBtn: '1',
        remark: '系统默认好评',
        limitRa: ''
      },
      rules: {
        brandId: { required: true, message: '请输入', trigger: 'change' },
        isBtn: { required: true, message: '请输入', trigger: 'change' },
        remark: { required: true, message: '请输入', trigger: 'blur' },
        limitRa: { required: true, message: '请输入', trigger: 'blur' }
      }
    }
  },
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  watch: {
  },
  computed: {
    currentVisible: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  filters: {},
  created() {
  },
  methods: {
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },

    // 
    handleSubmit() {
      this.$refs.rulesForm.validate(valid => {
        if (valid) {
          this.$emit('onRatingSet', this.form)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.title{
  text-align: center;
}
.desc{
  text-align: center;
}
.btn-wrapper{
  margin: 20px 0 10px;
  text-align: center;
}
.upload-fail-wrapper{
  margin-top: 20px;
}
</style>
